<template>
	<view class="my-wrapp">
		<view class="list">
			<view class="item" v-for="(item,index) in List" :key="index">
				<view class="header flex">
					<view class="avater">
						<u--image src="https://program.qdlearn.cn/ma/images/tc.jpg" width="120" height="120" shape="circle"></u--image>
					</view>
					<view class="right flex">
						<text class="li">姓名：{{item.name}}</text>
						<text class="li">职务：班主任</text>
						<text class="li">手机号：{{item.phone}}</text>
						<text class="li">是否在职：在职</text>
					</view>
				</view>
				<view class="foot flex" @click="callPhone(item.phone)">
					<image src="../../static/my/phone.png" style="width: 30rpx;height: 30rpx;"></image>
					<text class="title">联系班主任</text>
				</view>
			</view>
			<view v-if="List.length ==0" class="cm-none-tips">
				<image src="../../static/images/none_tip.png" mode="aspectFit"></image>
				<view>暂无班主任信息~</view>
			</view>
		</view>
	</view>
</template>

<script>
	import Util from '@/utils/util';
	import Alert from '@/utils/alert';
	import Api from '@/utils/api';
	import Rest from '@/utils/rest';
	
	import {
		mapState,
		mapGetters,
		mapMutations
	} from 'vuex'
	import store from '@/store/index.js'
	export default {
		data() {
			return {
				List:[],
				count:1,
			};
		},
		onShow() {
			this.index()
			
			
		},
		
		methods: {
			index(){
				Rest.post(Api.ZHUIGE_Index_Checkphone, {
				}).then(res => {
					if(res.data.user && res.data.user.meta_value) {
						this.getTeacher();
					} else {
						Util.openLink('/pages/login/login?type=mobile&p=1');
					}
				});
			},
			
			getTeacher(){
				Rest.post(Api.ZHUIGE_Index_Teacher, {
				}).then(res => {
					this.List = res.data.teachers;
					this.count = this.List.length;
				}, err => {
					console.log(err)
				});
				
				
			},
			callPhone(phone) {
				wx.makePhoneCall({
					phoneNumber: phone //仅为示例，并非真实的电话号码
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	/* -------- 提示 -------- */
	.cm-none-tips {
		text-align: center;
		padding: 100rpx;
	}
	.cm-none-tips image {
		height: 200rpx;
		width: 200rpx;
		margin-bottom: 30rpx;
	}
	.cm-none-tips view {
		font-size: 24rpx;
		font-weight: 300;
		color: #999999;
	}
	page {
		background-color: #F5F6F8;
	}
	.my-wrapp {
		padding: 48rpx;
		.list {
			.item {
				background-color: #fff;
				padding: 48rpx 32rpx;
				border-radius: 20rpx;
				margin-bottom: 20rpx;
				.avater {
					padding: 20rpx 32rpx 20rpx 20rpx;
				}
				.right {
					flex-direction: column;
					font-size: 28rpx;
				}
				.foot {
					margin: 0 20rpx;
					background-color: #EFEFEF;
					padding: 20rpx;
					border-radius: 50rpx;
					font-size: 30rpx;
					margin-top: 40rpx;
					align-items: center;
					justify-content: center;
					.title {
						padding-left: 14rpx;
					}
				}
			}
		}
		
	}
</style>
